<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />

    <title>Standard Google Tag Manager (GTM)</title>

    <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;

        // ORIGINAL
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;

        // HACK
        // j.src = './gtm.js?id=' + i + dl;

        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-W275NLW');
    </script>
    <!-- End Google Tag Manager -->

    <link
      rel="icon"
      id="favicon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌎</text></svg>"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <h1>Standard Google Tag Manager (GTM)</h1>

    <button onclick="pushFromData()">Standard dataLayer.push()</button>
    <script>
      function pushFromData() {
        const data = { event: 'button-click', some: { data: true } };
        console.log('dataLayer.push()');
        dataLayer.push(data);
      }
    </script>

    <hr />
    <p><a href="/tests/integrations/gtm/">Partytown GTM</a></p>
    <p>
      <a href="/tests/integrations/gtm/preserve-behavior.html"
        >Partytown GTM with preserveBehavior</a
      >
    </p>
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
